<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	*{
		margin: 0;
		padding: 0;
	}
	#title{
		width: 500px;
		margin: 0 auto;
		list-style: none;
		overflow: hidden;
	}
	#title li{
		width: 100px;
		height: 30px;
		border: 1px solid red;
		box-sizing:border-box;
		line-height: 30px;
		text-align: center;
		float: left;
	}
	#con{
		width: 500px;
		height: 300px;
		border: 1px solid red;
		margin: 0 auto;
	}
	#con p{
		width: 500px;
		height: 300px;
		line-height: 300px;
		text-align: center;
		display: none;
	}
	#con .show{
		display: block;
	}
	#title .select{
		background: #ccc;
	}
	</style>
</head>
<body>
<div id="tab1">
	<ul id="title">
		<li class="select" >111</li>
		<li >222</li>
		<li >333</li>
		<li >444</li>
		<li >444</li>
	</ul>
	<div id="con">
		<p class="show">内容一</p>
		<p>内容二</p>
		<p>内容三</p>
		<p>内容四</p>
		<p>内容四</p>
	</div>
</div>
<div id="tab2">
	<ul id="title">
		<li class="select" >111</li>
		<li >222</li>
		<li >333</li>
		<li >444</li>
	</ul>
	<div id="con">
		<p class="show">内容一</p>
		<p>内容二</p>
		<p>内容三</p>
		<p>内容四</p>
	</div>
</div>
	<script>

	function Tab(n,c){
		this.navs=document.querySelectorAll(n);
		this.cons=document.querySelectorAll(c);
		for (var i = 0; i < this.navs.length; i++) {
			var that=this;
			// this指向实例化对象
			this.navs[i].onclick=function(){
				// this指向当前点击的li
				that.fnclick(this)
			}
		};
	}
	Tab.prototype.fnclick=function(th){
		// this指向实例化对象
		for (var i = 0; i < this.navs.length; i++) {
			if (this.navs[i]==th) {
				this.navs[i].classList.add("select");
				this.cons[i].classList.add("show");
			}else{
				this.navs[i].classList.remove("select");
				this.cons[i].classList.remove("show");
			}
		};


	}
	var tab1=new Tab("#tab1>#title li","#tab1>#con p")
	var tab2=new Tab("#tab2>#title li","#tab2>#con p")
   
	</script>
</body>
</html>